import React from 'react'
import { Icon } from 'react-fa'

const prefixCls = 'x-card'

export default class Card extends React.Component {
	renderTitle = (title) => {
		return (
			<h2>{title}</h2>
		)
	}
	renderComponent = (data) => {
		const { children } = this.props
		if (children) {
			return (
				children
			)
		}

		return (
			<div className={`${prefixCls}-panel`}>
				<div className={`${prefixCls}-image`}>
					<Icon name={data.icon} />
				</div>
				<div className={`${prefixCls}-caption`}>{data.name}</div>
			</div>
		)
	}
	renderFooter = (actions) => {
		return (
			<div className={`${prefixCls}-toolbar`}>
				<ul>
					{actions.map((action, index) => {
						return (
							<li key={`action-${index}`}>{action.icon && <Icon name={action.icon} />}{action.text}</li>
						)
					})}
				</ul>
			</div>
		)
	}
	render() {
		const {
			title,
			data,
			// actions
		} = this.props
		return (
			<div className={prefixCls}>
				{title && this.renderTitle(title)}
				<div className={`${prefixCls}-body`}>
					{this.renderComponent(data)}
				</div>
				{/*actions && actions.length && this.renderFooter(actions)*/}
			</div>
		)
	}
}